import Head from 'next/head'
import Link from 'next/link'
import { useContext, useState } from 'react'
import Router from 'next/router'
import '../static/style/components/header.less'
import { Menu, Row, Col } from 'antd'
const { SubMenu } = Menu

const Header = (props) => {
  const webTit = props.title
  const isFixed = props.fixed ? true : false
  const [webInfo, setWebInfo] = useState({
    siti: 'Cat享',
    slogan: '享你所想',
    logo: ''
  })
  const [menulist, setMenuList] = useState([
    // {
    //   key: 'home',
    //   name: '首页',
    //   icon: 'HomeOutlined'
    // },
    {
      key: 'classify',
      name: '分类',
      icon: 'UnorderedListOutlined'
    },
    {
      key: 'more',
      name: '更多',
      icon: 'SmallDashOutlined',
      children: [
        {
          key: 'about',
          name: '关于'
        }
      ]
    }
  ])
  const goPage = ({ key }) => {
    // console.log(path)
    Router.push('/' + key)
  }
  return (
    <>
      <Head>
        <title>
          {webInfo.siti}-{webTit}
        </title>
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <header className='header' style={{ position: isFixed ? 'fixed' : 'relative' }}>
        <Row type='flex' justify='center'>
          <Col xs={24} sm={24} md={10} lg={10} xl={10}>
            <Link href='/'>
              <div className='header-left'>
                <span className='header-logo'>{webInfo.siti}</span>
                <span className='header-txt'>{webInfo.slogan}</span>
              </div>
            </Link>
          </Col>

          <Col className='memuDiv' xs={0} sm={0} md={14} lg={8} xl={6}>
            <div className='header-right'>
              <Menu mode='horizontal' onClick={goPage}>
                {menulist.map((el) => {
                  // const ConponentName = icons[el.icon]
                  if (el.key === 'more') {
                    return (
                      <SubMenu key={el.key} title={el.name}>
                        {el.children.map((e) => {
                          return <Menu.Item key={e.key}>{e.name}</Menu.Item>
                        })}
                      </SubMenu>
                    )
                  }
                  return (
                    <Menu.Item key={el.key}>
                      {/* <ConponentName /> */}
                      {el.name}
                    </Menu.Item>
                  )
                })}
              </Menu>
            </div>
          </Col>
        </Row>
      </header>
    </>
  )
}

export default Header
